<template>
  <div style="padding: 10px">
    <el-card shadow="never" style="border-color: whitesmoke;min-height: calc(100vh - 84px)">
      <el-button type="primary" icon="md-add-circle" style="margin-bottom: 15px" @click="addType(null,0)">添加类型</el-button>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        default-expand-none
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column label="类型的名称" >
          <template slot-scope="scope">
            <span v-if="scope.row.name">{{scope.row.name}}</span>
            <span v-if="scope.row.categoryName">{{scope.row.categoryName}}</span>
          </template>
        </el-table-column>
        <el-table-column  label="封面">
          <template slot-scope="scope">
            <img style="display: flex;align-items: center" width="32" height="32" :src="scope.row.img" fit="cover" v-if="scope.row.parentId"/>
          </template>
        </el-table-column>

        <el-table-column  label="操作"  width="350" fixed="right">
          <template v-slot="scope">
            <el-button type="primary" icon="md-add-circle" @click="addType(scope.row,1)" v-if="!scope.row.parentId">添加子类型</el-button>
            <el-button type="warning" icon="ios-create" @click="update(scope.row)">修改</el-button>
            <el-button type="error" icon="ios-trash" @click="deleteOne(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div  style="justify-content: center;display: flex;width: 100%">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[3, 5, 10, 15]"
          :page-size="queryParams.pageSize"
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!--    新增或者编辑-->
    <el-dialog :visible.sync="visible"  :title="title">
      <el-form :model="updateData" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型名称" prop="name" >
              <el-input v-model="updateData.name" placeholder="请输入类型名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型封面" v-if="updateData.show">
              <el-upload
                class="avatar-uploader"
                :action="uploadAction"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :headers="{ 'Authorization':token}"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" style="object-fit: cover;"/>
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>


          </el-col>
        </el-row>
        <div style="text-align: center">
        <el-button type="primary" icon="ios-create" @click="ok">确定</el-button>
        <el-button type="error" icon="ios-trash" @click="visible=false">取消</el-button></div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  data(){
    return{
      token:localStorage.getItem("token"),
      imageUrl:'',
      status:[{label:'正常',value:'0'},{label:'禁用',value:'1'}],
      types:[{label:'类型',value:'P'},{label:'具体标签',value:'B'}],
      visible:false,
      title:'',
      tableData:[],
      updateData:{},
      queryParams:{
        pageNum:1,
        pageSize:10

      },
      total:0
    }
  },
  computed: {
    uploadAction() {
      return 'http://localhost:8090/upload';
    }
  },
  created() {
    this.getData()
  },
  methods:{
    //删除
    deleteOne(row){
        request.post('/productCategories/deleteData',row).then(resp=>{
          if (resp.code===0){
            this.getData()
            this.message(resp.errorMessage,'success')
          }else {
            this.message(resp.errorMessage,'error')
          }
        })
    },
    //分页
    handleSizeChange(val){
      this.queryParams.pageSize = val;
      this.queryParams.pageNum = 1;
      this.getData()
    },
    handleCurrentChange(val){
      this.queryParams.pageNum = val;
      this.getData()
    },
    update(i){
      this.updateData=i
      this.title='修改类型'
      if (i.parentId){
        this.updateData.name=this.updateData.categoryName
      this.updateData.show=true
        this.updateData.img=i.img
      this.imageUrl=i.img
      }
      this.visible=true

    },
    ok(){
      request.post('/productCategories/addupdateCatories',this.updateData).then(resp=>{
        if (resp.code===0){
          this.getData()
          this.message(resp.errorMessage,'success')
          this.visible=false
        }else {
          this.message(resp.errorMessage,'error')
        }
      })
    },
    addType(row,i){
      this.updateData={}
      if (row&&i===1) {
        this.updateData.parentId = row.id
        this.updateData.show=true
      }else {
        this.updateData.show=false
      }
      this.title='新增类型'
      this.visible=true
    },
    getData(){
      request.post('/productCategories/getData',this.queryParams).then(resp=>{
        this.tableData=resp.list
        this.total=resp.total
      })
    },

    //上传图片
    handleAvatarSuccess(res) {
      console.log(res)
      this.updateData.img =res.data ;
      this.imageUrl=res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isJPG2 = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG && !isJPG2 && !isPNG ) {
        this.message.error("只支持jpg或png格式图片");
      }
      if (!isLt5M) {
        this.message.error("请上传5MB以内的图片!");
      }
      return (isJPG || isJPG2 || isPNG) && isLt5M;
    },
  }
}
</script>

<style scoped>

>>> .el-upload{
  background-color: #dedede;
  border-radius: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
>>> .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
>>> .avatar-uploader-icon {
  font-size: 28px;
  z-index: 200000;
  color: #8c939d!important;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
>>> .el-table th.el-table__cell {
  background-color: #f7f7f8 !important;
  color: #515a6e !important;
  font-size: 14px !important;
}
>>> .el-table__header-wrapper {
  color: black!important;
}
</style>
